<template>
  <div class="export-list">
    <el-form ref="ruleFormRef" label-width="right" class="conditions-form">
      <el-form-item label="导出列表" prop="deviceType"></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refreshList">刷新</el-button>
      </el-form-item>
    </el-form>
    <div class="cont">
      <el-table :data="exportListData" stripe border>
        <el-table-column prop="exportTime" label="导出时间" align="center"></el-table-column>
        <el-table-column prop="fileName" label="文件名称" align="center"></el-table-column>
        <el-table-column prop="fileSize" label="文件大小 / MB" align="center"></el-table-column>
        <el-table-column prop="dataRange" label="数据范围" align="center" width="400"></el-table-column>
        <el-table-column prop="dataFrequency" label="数据频率 / S" align="center"></el-table-column>
        <el-table-column prop="taskStatus" label="任务状态" align="center">
          <template #default="{ row }">
            <span v-if="row.taskStatus === 0"><el-icon color="#43B244" size="16"><CircleCheck /></el-icon></span>
            <span v-else><el-icon color="red" size="16"><Warning /></el-icon></span>
          </template>
        </el-table-column>
        <!--下载-->
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="text" @click="downloadFile(row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const refreshList = () => {
  console.log('刷新导出列表');
};
//导出时间、文件名称、文件大小 / MB、数据范围、数据频率 / S、任务状态
const exportListData = ref([
  {
    exportTime: '2023-10-01 12:00:00',
    fileName: 'export1.csv',
    fileSize: '2.5',
    dataRange: '2023-10-01 00:00:00 - 2023-10-01 23:59:59',
    dataFrequency: '60',
    taskStatus: 0
  },
  {
    exportTime: '2023-10-02 12:00:00',
    fileName: 'export2.csv',
    fileSize: '3.0',
    dataRange: '2023-10-02 00:00:00 - 2023-10-02 23:59:59',
    dataFrequency: '60',
    taskStatus: 1
  },
  {
    exportTime: '2023-10-03 12:00:00',
    fileName: 'export3.csv',
    fileSize: '1.5',
    dataRange: '2023-10-03 00:00:00 - 2023-10-03 23:59:59',
    dataFrequency: '60',
    taskStatus: 0
  }
]);
const downloadFile = (fileName: string) => {
  console.log(`Downloading ${fileName}`);
};
</script>

<style lang="scss" scoped>
.export-list {

  .cont {
    padding: 0.12rem 0.16rem;
    background: #fff;
    margin-top: 0.12rem;

    :deep(.el-table th) {
      background: #F2F3F5;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
